<html>

<head>
    <script src="https://g.alicdn.com/bizcharts/io-asserts/3.1.2/react16.0.0.production.min.js"></script>
    <script src="https://g.alicdn.com/bizcharts/io-asserts/3.1.2/react-dom16.0.0.production.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
    <script src="https://g.alicdn.com/bizcharts/io-asserts/3.1.5/BizCharts.min.js"> </script>
    <script type="text/javascript" src="https://gw.alipayobjects.com/as/g/datavis/assets/1.0.1/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.6/data-set.min.js"></script>
    <script type="text/javascript" src="https://gw.alipayobjects.com/as/g/datavis/assets/1.0.1/lodash-4.17.4.min.js"></script>

</head>

<body>
    <div id="mountNode"></div>
    <script type="text/babel">
        const { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape } = window.BizCharts;
        var ds = new DataSet({
          state: {
              currentState: 'WY'
          }
      });
      $.getJSON('./population-by-age.json', data => {
        var dvForAll = ds
        .createView('populationByAge', {
            watchingStates: [], // 用空数组，使得这个实例不监听 state 变化
        }) // 在 DataSet 实例下创建名为 populationByAge 的数据视图
        .source(data);
        dvForAll
            .transform({ // 合并列
                type: 'fold',
                fields: [ '小于5岁','5至13岁','14至17岁','18至24岁','25至44岁','45至64岁','65岁及以上' ],
                key: 'age',
                value: 'population'
            })
            .transform({
                type: 'map',
                callback: function(row) {
                    row.population = parseInt(row.population, 10);
                    return row;
                }
            });
        var dvForOneState = ds
            .createView('populationForOneState')
            .source(dvForAll);
        dvForOneState
            .transform({ // 过滤数据
                type: 'filter',
                callback: function(row) {
                    return row.state === ds.state.currentState;
                }
            })
            .transform({
                type: 'percent',
                field: 'population',
                dimension: 'age',
                as: 'percent'
            });

        BizCharts.G2.Global.widthRatio.column = .95;
        ReactDOM.render((
            <div>
                <Chart
                    data={dvForAll}
                    height={400}
                    forceFit={true}
                    onTooltipChange={(evt)=>{
                        console.log(111);
                        const items = evt.items || [];
                        if (items[0]) {
                            ds.setState('currentState', items[0].title);
                        }
                    }
                    }
                >
                    <Legend position='bottom' />
                    <Tooltip />
                    <Axis name="population" label={{
                        formatter: val => {
                        return val / 1000000 + 'M';
                        }
                    }} />
                    <Geom
                        type="intervalStack"
                        position="state*population"
                        color="age"
                        select={[true, {
                            mode: 'single',
                            style: {
                            stroke: 'red',
                            strokeWidth: 5
                            }
                        }]}
                    />
                </Chart>
                <Chart
                    data={dvForOneState}
                    height={300}
                    forceFit={true}
                    padding={0}
                >
                    <Coord type='theta' radius={0.8}/>
                    <Tooltip />
                    <Geom
                        type="intervalStack"
                        position="percent"
                        color="age"
                    >
                    <Label content={['age*percent',(age, percent) => {
                        percent = (percent * 100).toFixed(2) + '%';
                        return age + ' ' + percent;
                    }]} />
                    </Geom>
                </Chart>
            </div>
        ), document.getElementById("mountNode"));
      });
    </script>

</body>

</html>